// JavaScript Document
$(document).ready(function(){
	js_main("#jsbox",".jsbox_img",".jsbox_num","num_background");
});
function js_main(jsbox,jsbox_img,jsbox_num,on){
	var timer=null;
	$jsbox=$(jsbox);//获取整个js的div
	$ul=$(jsbox_img);//获取js的div下的ul
	$li=$ul.children();//获取li
	size=$li.size();//不加$的时候是全局变量在方法外也可访问，这里计算li的数量
	widths=$li.eq(0).width();//计算出一张图片的宽
	last_widths=widths*size;
	index=1;
	$jsnum=$jsbox.find(jsbox_num+" li").mouseover(function(){
		if(timer){//检测是否已经设计间隔时间执行动画
			clearInterval(timer);//清除setInterval设定的动画
		}
		index=$(this).index();//获取鼠标经过li的数组下标
		slider();//使用规定好的变量执行动画
		timer = setInterval(slider, 5000);//间隔5000毫秒执行一次动画
	});
	slider=function(){
		if(index===size){//当执行到最后一张js图片的时候将css初始化为开始
			var t=$li.eq(0).css({position:"relative",left:last_widths});
			callback=function(){
				t.css({left:0});
				$ul.css({left:0});
			};
			myTop=-index*widths;
			eq=index=0;
		}else{
			var myTop=-index*widths;//加-号是向左移动，因为他的零零点在左上角
			callback='';//将css初始化方法注销掉
			eq=index;
		}
		$jsnum.removeClass(on).eq(eq).addClass(on);//首先清除有选中样式的滑块，然后将当前滑块设为选中样式
		$ul.stop().animate({left:myTop},500,callback);//这里加stop的意思是停止正在执行的动画，然后继续执行下面的animate
		index++;
	}
	$ul.width(last_widths);
	timer=setInterval(slider,5000);//间隔一定时间执行这个动画
}